<template>
	<div class="login">
		<div class="logobox">
			<div class="logo">
				<image src="../../static/login/logo.png"></image>
			</div>
		</div>
		<div class="frombox">
			<div class="login_input">
				<image src="../../static/login/phone.png" ></image>
				<input type="text" placeholder="请输入您的手机号码" class="inputnone">
			</div>
			<div class="login_input">
				<image src="../../static/login/lock.png" ></image>
				<input type="text" placeholder="请输入短信验证码" class="inputnone">
				<div class="mcsure">
					获取验证码
				</div>
			</div>
			<div class="usertodo">
				手机号首次登录即默认注册
			</div>
		</div>
		<div class="btnbox">
			<div class="loginbtn" @click="gotoaddress">
				登录
			</div>
			<div class="change" @click="gotoadministratorlogin">
				平台切换
			</div>
		</div>
		
		<!-- 文字滚动 -->
		<uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

		<!-- <div class="showhidebox">
			<div class="itembox">
				<progress percent="20" show-info stroke-width="3" />
			</div>
		</div> -->
	</div>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'

	//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
	export default {
		data() {
			return {
				news: [],
				phone: '',
				captcha: '',
				list:{
					"1": "顺丰速运",
					"2": "圆通速递",
					"3": "申通快递",
					"4": "中通速递",
					"5": "百世汇通",
					"6": "韵达快递",
					"7": "快捷快递",
					"8": "EMS",
					"9": "天天快递",
					"10": "全峰快递",
					"11": "宅急送快递",
					"12": "优速快递"
				}
			};
		},
		onLoad: function() {
			let paked =Object.entries(this.list)
			console.log('this.array',paked)
			for (var i = 0; i < this.list.length; i++) {
			      paked.push(this.list[i+1])
			      console.log('this.array',paked,this.list,this.list[i+1])
			    }
				console.log('this.array')
		},
		components: {uniNoticeBar},
		methods: {
			checkForm() {
			  // const err = this.$toast.error
			  // if (!this.phone) {
			  //   err('请输入正确的手机号')
			  //   return false
			  // }
			
			
			  // if (!this.captcha) {
			  //   err('请输入正确的验证码')
			  //   return false
			  // }
			
			  const params = {
			    phone: this.phone,
			    sms_captcha: this.sms_captcha
			  }
			
			
			  return params
			},
			

			async patientLogin() {
				const params = this.checkForm()
			  // const success = this.$api.user.loginChkLogin
			  uni.request({
			      url: this.$api.besurl+this.$api.user.loginChkLogin.path, //仅为示例，并非真实接口地址。
			      method:this.$api.user.loginChkLogin.m,
			      // header: {
			      // 	'content-type': 'application/json',
			      // },
			      data: {
			          phone :params.phone,
			          sms_captcha:params.sms_captcha
			      },
			      success: (res) => {
			        G.showToast({
			          title: JSON.stringify(res.data) ,
			          icon: 'none',
			          duration: 3000
			        })
			          // console.log(res.data);
			          this.news = JSON.stringify(res.data);
			      }
			  });
			  console.log(this.$api)
			  // if (success) {
			  //   this.redirect(this.$global.switchTab, '/pages/patient/main')
			  // }
			},
			gotoaddress(e) {
				uni.navigateTo({
					url: '../address/address' 
				});
			},
			gotoadministratorlogin(e) {
				uni.navigateTo({
					url: '../administrator/login/login' 
				});
			}
		}
	}
</script>

<style>
	.logobox {
		display: flex;
		justify-content: center;
		height: 490rpx;
		align-items: center;
	}

	.logo {
		width: 204rpx;
		height: 204rpx;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}
	.frombox{
	}
	.login_input{
		margin: 0 auto;
		width: 580rpx;
		display: flex;
		height: 100rpx;
		border-bottom: 2rpx solid #e0e0e0;
		line-height: 100rpx;
		box-sizing: border-box;
	}
	.login_input input{
		border: none;
		background-color: hsla(0,0%,100%,0);
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		flex: 0 0 300rpx;
	}
	.login_input image{
		margin: 32rpx 32rpx 32rpx 0 ;
		width: 32rpx;
		height: 32rpx;
		flex: 0 0 32rpx;
	}
	.mcsure{
		flex: 1;
		text-align: right;
		font-size: 28rpx;
		color: grey;
	}
	.usertodo{
		width: 600rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding-left: 76rpx;
		font-size:24rpx;
		font-weight:400;
		color:rgba(59,72,86,1);
		height: 100rpx;
		line-height: 100rpx;
	}
	.loginbtn{
		width: 600rpx;
		margin: 0 auto;
		border-radius: 12rpx;;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		text-align: center;
		margin-top: 80rpx;
	}
	.change{
		width: 600rpx;
		margin: 0 auto;
		text-align: right;
		margin-top: 64rpx;
		font-size: 32rpx;
	}
	.showhidebox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transition-duration: 0.3s;
		display: flex;
		align-items: center;
	}	
	.itembox{
		width: 80vw;
		margin: 0 auto;
	}
</style>
